<template>
	<el-dialog
		:visible="visible"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
		width="800px"
		center
	>
		<div slot="title">
			操作确认
		</div>
		<el-form
			ref="form"
			:model="form"
			:rules="formRules"
			label-width="150px"
		>
			<el-form-item label="俱乐部入局游戏">
				<div style="margin-bottom:-18px;padding-left: 7px;">
					{{
						form.joinGameLockStatus === 0
							? $t('common.start_up')
							: $t('common.disabled')
					}}
				</div>
				<el-switch
					v-model="form.joinGameLockStatus"
					:active-value="0"
					:inactive-value="1"
				/>
			</el-form-item>
			<el-form-item label="操作备注" prop="remark">
				<el-input
					v-model="form.remark"
					clearable
					type="textarea"
					:maxlength="200"
					show-word-limit
					:autosize="{ minRows: 4, maxRows: 4 }"
					style="width: 400px"
					v-input="{ name: 'noEmpty' }"
					:placeholder="$t('common.please_enter')"
				></el-input>
			</el-form-item>
			<el-form-item label="上传附件">
				<el-col :span="12">
					<UploadItem
						ref="imgUpload"
						:upload-file-type="'image'"
						:platform="'PC'"
						:uploadAPI="uploadAPI"
						:fileSize="fileSize"
						:imgUrl="form.imageAddress"
						:disabled="uploadDisabled"
						@upoladItemSucess="handleUploadSucess"
						@startUpoladItem="handleStartUpload"
						@deleteUpoladItem="handleDeleteUpload"
						@upoladItemDefeat="handleUploadDefeat"
					></UploadItem>
				</el-col>
				<el-col :span="24">
					<p class="imgTip">
						附件图片格式仅支持png,jpg 大小不超过2MB
					</p>
				</el-col>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button
				:disabled="loading || uploadDisabled"
				@click="handleClose"
			>
				{{ $t('common.cancel') }}
			</el-button>
			<el-button
				type="primary"
				:disabled="loading || uploadDisabled"
				:loading="loading"
				@click="submit()"
			>
				{{ $t('common.confirm') }}
			</el-button>
		</div>
	</el-dialog>
</template>
<script>
import UploadItem from '@/components/UploadItem'
export default {
	components: { UploadItem },
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			loading: false,
			uploadDisabled: false,
			form: {
				joinGameLockStatus: this.detailData.joinGameLockStatus || 0,
				remark: '',
				imageUrl: ''
			}
		}
	},
	computed: {
		formRules() {
			return {
				remark: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'blur'
					}
				]
			}
		},
		uploadAPI() {
			return this.$api.imageUpload
		},
		fileSize() {
			return 2 * 1024 * 1024
		}
	},
	created() {},
	methods: {
		submit() {
			if (
				this.form.joinGameLockStatus ===
				this.detailData.joinGameLockStatus
			) {
				this.$message.closeAll()
				this.$message.warning('俱乐部入局游戏状态未改变,不能提交')
				return
			}
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true
					const params = {
						id: this.detailData.id,
						...this.form
					}
					this.$api
						.setClubMemberStartOrStop(params)
						.then((res) => {
							this.loading = false
							this.isEdit = false
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.action_success')
								)
								this.$emit('update:visible', false)
								this.$emit('loadData')
							}
						})
						.catch(() => {
							this.loading = false
						})
				}
			})
		},
		handleClose() {
			this.$emit('update:visible', false)
		},
		handleStartUpload() {
			this.uploadDisabled = true
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }) {
			this.form.imageUrl = file.imgUrl
			this.uploadDisabled = false
		},
		handleUploadDefeat() {
			this.form.imageUrl = ''
			this.uploadDisabled = false
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload() {
			this.form.imageUrl = ''
			this.uploadDisabled = false
			this.$message.warning(this.$t('common.upload_del'))
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	background-color: #333333;
	color: #ffffff;
	font-weight: 700;
	padding: 10px 20px 10px;
	text-align: center;
}

::v-deep .el-dialog__headerbtn {
	font-size: 24px;
	top: 10px;
	right: 10px;
}
::v-deep .el-dialog__close {
	color: #ffffff;
}
.club-label {
	font-weight: 700;
	margin-left: 200px;
	text-align: right;
	vertical-align: middle;
	font-size: 14px;
	color: #606266;
	line-height: 40px;
	padding: 0 12px 0 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
</style>
